<template>
	<view class="page-container">
		
		<p class="block-title">日期</p>
		<date-picker @change="handleDateChange" />
		
		<p class="block-title">类型</p>
		<handle-bill-type @change="handleChangeBillType"/>
		
		<p class="block-title">金额</p>
		<count-inputer @change="handleChangeCount"/>
		
		<p class="block-title">支付方式</p>
		<handle-pay-by @change="handleChangePayBy"/>
		
		<p class="block-title">标签</p>
		<handle-label @change="handleChangeLabels"/>
		
		<p class="block-title">备注</p>
		<handle-comment @change="handleChangeComment"/>

		<view class="page-btns">
			<view class="btn confirm" @click="confirm">保存</view>
		</view>
		
	</view>
</template>

<script setup>
	import { reactive } from 'vue'

	import DatePicker from '../../components/date-picker.vue';
	import handleBillType from './components/handle-bill-type.vue';
	import countInputer from './components/count-inputer.vue';
	import handlePayBy from './components/handle-pay-by.vue';
	import handleLabel from './components/handle-label.vue';
	import handleComment from './components/handle-comment.vue';

	import { addBill } from '@/api/bill'

	const formData = reactive({
		date: 0,
		count: 0,
		type: 'expenditure',
		labels: [],
		comment: '',
		payBy: '',
	})

	const handleDateChange = value => {
		formData.date = value;
	}
	const handleChangeBillType = value => {
		formData.type = value;
	}
	const handleChangeCount = value => {
		formData.count = value;
	}
	const handleChangePayBy = value => {
		formData.payBy = value;
	}
	const handleChangeLabels = value => {
		formData.labels = value;
	}
	const handleChangeComment = value => {
		formData.comment = value;
	}
	const confirm = async () => {
		console.log(formData);
		const res = await addBill(formData);
		console.log(res);
		debugger
	}
	
</script>

<style lang="less" scoped>
	.page-container{
		padding-bottom: 30rpx;
		.block-title{
			font-size: 34rpx;
			color: #666666;
			margin-top: 18rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}
		.page-btns{
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			margin: 30rpx auto 0;
			.btn{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #EEEEEE;
				border-radius: 8rpx;
				&.confirm{
					background-color: #6236FF;
					color: #FFFFFF;
				}
			}
		}
	}
</style>